<template>
	<view>
			<view class="u-page">
				<view class="tree-list">
                   <listItem :list="treeData" :show-count="true" @onItemClick="handlerItemClick" ref="listItem">
                        <template  v-slot:content="{item}">
                        	<view class="chatInfo">
                        	    <view class="len1">
                        	        <view class="label">{{item.label}}</view>
                        	        <view class="date">{{item.lastMsgDate}}</view>
                        	    </view>
                        	    <view class="easy-msg">
                        	        <text v-if="item.unReadMsg && item.unReadMsg.length">
										[{{item.unReadMsg.length}}条]{{item.lastMsg}}
									</text>
                        	    </view>
                        	</view>
                        </template>
                    </listItem>
				</view>
				<view class="add" @click="selectConcacts()">
					<image src="/static/imgs/addQQ.png" mode="aspectFill"></image>
				</view>
			</view>
            <view class="commongap _150"></view>
			<mytabbar></mytabbar>
	</view>
</template>

<script>
	import mytabbar from '@/components/tabbar/index.vue';
    import listItem from '@/components/listItem/index.vue';
    import dateUtil from '@/utils/dateUtil.js';
    import {mapState, mapMutations} from 'vuex';
	export default {
		components: {listItem, mytabbar},
		options: { styleIsolation: 'shared' },
		data() {
			return {
				treeData: []
			}
		},
		onLoad() {
            var vm = this;
            vm.getChatList();
		},
        onShow() {
            uni.showLoading();
            let pages = getCurrentPages();
            let currPage = pages[ pages.length - 1];
            if(currPage.data.callBackData){
                this.createChat(currPage.data.callBackData);
            }
            currPage.data.callBackData = undefined;
            uni.hideLoading();
        },
        computed: {
           ...mapState(['userInfo']) 
        },
		methods: {
            createChat(userList) {
                if (userList.length == 1 && userList[0].id == this.userInfo.userId) {
                    uni.$u.toast('不能和自己发起聊天。');
                } else {
                    var chatObject = {
                      id: this.$Util.uuid(),
                      label: this.getQunliaoLabel(userList),
                      icon: '/static/logo.png',
                      isNewChat: true,
                      unReadMsg: [ {id: 'a0001', type: 'system', type2: 'text', time: this.$Util.getFmtDate(new Date()), content: {text: '群聊已创建'}},],
                    };
                    this.handlerItemClick(chatObject);
                }
            },
            handlerItemClick: function (item) {
                uni.setStorageSync('chatObject', item);
                uni.navigateTo({
                    url: '/pages/qq/chat'
                })
            },
            getQunliaoLabel (list) {
                if (list.length == 1) {
                    return list[0].label;
                }
                var str = '与';
                str += list.slice(0, 3).map(n => n.label).join(',');
                if (list.length > 3) {
                    str += '等人';
                }
                str += '的群聊';
            },
            getChatList: function () {
                uni.showLoading({});
                setTimeout(() => {
                    uni.hideLoading();
                    var treeData = [
                        { id: 1, label: '领悟集团', icon: '/static/logo.png', unReadMsg: [
                            {id: 'a0001', type: 'system', type2: 'text', time: '2022-04-02 15:37:39', content: {text: '欢迎顾越加入聊天室'}},
                            {id: 'a0002', type: 'user', type2: 'text', time: '2022-04-02 15:37:40', userId: '18', content:  {text: '你好，我是公司HR，请做一下自我介绍'}},
                            {id: 'a0003', type: 'user', type2: 'text', time: '2022-04-02 15:37:41', userId: '17', content:  {text: '大家好，我叫顾越越，完了。'}},
                            {id: 'a0004', type: 'user', type2: 'text', time: '2022-04-02 15:37:42', userId: '18', content:  {text: '你为什么来我们公司面试'}},
                            {id: 'a0005', type: 'user', type2: 'text', time: '2022-04-02 15:37:43', userId: '17', content:  {text: '因为我要找工作'}},
                            {id: 's0001', type: 'system', type2: 'redEnvelope', time: '2022-04-02 15:37:43', content:  {text: '顾越领取了你的红包'}},
                            {id: 'a0006', type: 'user', type2: 'voice', time: '2022-04-02 15:37:44', userId: '18', content: {url: "/static/voice/2.mp3",length: "00:06"}},
                            {id: 'a0007', type: 'user', type2: 'voice', time: '2022-04-02 15:37:45', userId: '17', content: {url: "/static/voice/2.mp3",length: "00:06"}},
                            {id: 'a0009', type: 'user', type2: 'img', time: '2022-04-02 15:37:47', userId: '123456', content: {url: "https://zhoukaiwen.com/img/Design/logo/psketch3.png",w: 200,h: 200}}
                        ]} ,
                        { id: 2, label: '饭友小分队一部', icon: '/static/logo.png', unReadMsg: [] },
                        { id: 3, label: '饭友小分队二部', icon: '/static/logo.png', unReadMsg: [] },
                        { id: 4, label: '周刚发起的群聊', icon: '/static/logo.png', unReadMsg: [] },
                        { id: 5, label: '汪国庆、周立冰、琪爸', icon: '/static/logo.png', unReadMsg: [] },
                        { id: 11, label: '群聊', icon: '/static/logo.png', unReadMsg: []  },
                        { id: 21, label: '饭友小分队一部', icon: '/static/logo.png', unReadMsg: [] },
                        { id: 31, label: '饭友小分队二部', icon: '/static/logo.png', unReadMsg: [] },
                        { id: 41, label: '周刚发起的群聊', icon: '/static/logo.png', unReadMsg: [] },
                        { id: 351, label: '汪国庆、周立冰、琪爸', icon: '/static/logo.png', unReadMsg: [] },
                        { id: 311, label: '群聊', icon: '/static/logo.png', unReadMsg: []  },
                        { id: 321, label: '饭友小分队一部', icon: '/static/logo.png', unReadMsg: [] },
                        { id: 331, label: '饭友小分队二部', icon: '/static/logo.png', unReadMsg: [] },
                        { id: 341, label: '周刚发起的群聊', icon: '/static/logo.png', unReadMsg: [] },
                        { id: 351, label: '汪国庆、周立冰、琪爸', icon: '/static/logo.png', unReadMsg: [] }
                    ];
                    this.treeData = treeData;
					treeData.forEach(n => {
						n.lastMsgDate = this.getLastMsgDate(n);
						n.lastMsg = this.getLastMsg(n);
					})
                }, 500);
            },
            getLastMsg: function (item) {
				if (item.unReadMsg && item.unReadMsg.length) {
                    var lastItem = item.unReadMsg.last();
                    if (lastItem.type2 == 'text' || lastItem.type == 'system') {
                        return lastItem.content.text;
                    } else if (lastItem.type2 == 'img') {
				        return '[图片]';
                    } else if (lastItem.type2 == 'voice') {
				        return '[语音]';
                    }
				} else {
				    return '';
				}
			},
            getLastMsgDate: function (item) {
              if (item.unReadMsg && item.unReadMsg.length) {
                  var lastTime = item.unReadMsg.slice(-1)[0].time;
				  // debugger
                  if (dateUtil.isToday(lastTime)) {
                    return lastTime.slice(11, 16);
                  } else {
                    return lastTime.slice(5, 10);
                  }
              } else {
                  return '';
              }
            },
            selectConcacts: function () {
                var params = {
                    title: '发起群聊',
                    multity: true,    // 是否多选 默认true
                    searchAble: false, // 一般非一次性加载，数据量比较多，searchAble为true,做复杂搜索
                    filterAble: true, // 一般一次性加载， filterAble为 true, 做简单过滤
                    loadApi: '/mobile/oa/getAllConcats.jsp'
                };
                
                uni.navigateTo({
                    url: '/pages/common/tree-select/index?query=' + encodeURIComponent(JSON.stringify(params))
                });
            }
		}
	}
</script>

<style lang="scss" scoped>
    .tree-list {
    	background: #fff;
        padding: 20rpx;
		/deep/ {
			scoped-slots-content {
				flex-grow: 1;
				.chatInfo {
					margin-left: 10rpx;
					margin-top: -10rpx;
					.len1 {
						display: flex;
						justify-content: space-between;
						align-items: end;
						.label {
							color: $lw_text_1;
							font-size: 34rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							max-width: 520rpx;
						}
						.date {
							color: $lw_text_3;
							font-size: 26rpx;
							min-width: 80rpx;
							text-align: right;
						}
					}
					.easy-msg {
						color: $lw_text_3;
						font-size: 26rpx;
					}
				}
			}
		}
    }
	.add image {
		width: 122rpx;
		height: 122rpx;
		position: fixed;
		right: 10rpx;
		bottom: 140rpx;
        bottom: calc(140rpx + constant(safe-area-inset-bottom));
        bottom: calc(140rpx + env(safe-area-inset-bottom));
	}
	
	
</style>
